<template>
  <el-row>
    <el-col :span="12">
      <el-row>
        <el-col :span="24">
          <ve-bar :data="transactionInfos"></ve-bar>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="licc-data-center-user-col">
          总销售额：{{transactionNum}}
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="12">
      <el-row>
        <el-col :span="24">
          <ve-pie :data="userData"></ve-pie>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="licc-data-center-user-col">
          用户总数：{{userNum}}
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
  import dataCenterApi from '@/api/backstage/dataCenter'
  export default {
    data () {
      return {
        userData: {},
        userDataEmpty:false,
        userNum:0,
        transactionInfos:{},
        transactionInfosEmpty: true,
        transactionNum:0,
      }
    }, created() {
      this.initData()
    },
    methods: {
      initData() {
        dataCenterApi.getTransactionInfosGroupBySex().then(res => {
          this.transactionNum = res.data.allNum;
          this.transactionInfos = {
            rows: res.data.rows,
            columns: res.data.columns
          };
        }).catch(() => {
          this.$notify.error({title: '失败', message: '获取消费额信息失败，请稍后再试！'});
        });
        dataCenterApi.getCountGroupBySex().then(res => {
          this.userNum = res.data.allNum;
          this.userData = {
            rows: res.data.rows,
            columns: res.data.columns
          };
        }).catch(() => {
          this.$notify.error({title: '失败', message: '获取用户分类信息失败，请稍后再试！'});
        });
      },
    }
  }
</script>
<style>
  .licc-data-center-user-col{
    font-size: 14px;
    text-align: center;
  }
</style>
